$header_height: 8.5%;
$card_bg: #122054;
$card_spacing: 10px;

.kan-ban-container {
	width: 100%;
	height: 100vh;
	background-size: 100%;
	background: url("../../../assets/images/technologyMonitor/jk2.jpg") no-repeat center;
	//background: url("../../../assets/images/technologyMonitor/bg.jpeg") no-repeat center #000E25;

	.header-box {
		height: $header_height;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 700;
		color: #fff;
		padding: 0 10px;
		box-sizing: border-box;
		background: url("../../../assets/images/largeCentralControlScreen/header_bg.png") no-repeat center;
		background-size: 100% 100%;
		.header-left-box {
			width: 30%;
			height: 100%;
			display: flex;
			align-items: flex-end;
			.workshop-dropdown-item {
				padding: 0 10px;
				height: 32px;
				line-height: 32px;
			}
			.workshop-dropdown-item:hover {
				color: #2d8cf0;
				cursor: pointer;
			}
		}
		.header-right-box {
			width: 30%;
			height: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
			.current-time-bar {
				height: 32px;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				margin-right: 10px;
				.current-y-m {
					font-size: 14px;
					color: #1062b9;
				}
				.current-h-m-s {
					font-size: 16px;
					color: #2d8cf0;
				}
			}
		}
		.kan-ban-title {
			height: 90%;
			width: 40%;
			border-radius: 10px;
			font-size: 32px;
			letter-spacing: 2px;
			display: flex;
			justify-content: center;
			align-items: center;
			.edit-icon {
				cursor: pointer;
				color: #2d8cf0;
				font-size: 18px;
				margin-left: 2px;
			}
		}
	}
	.section-box {
		width: 100%;
		height: calc(100% - #{$header_height});
		display: flex;
		.card-box-padding {
			padding: $card_spacing;
			box-sizing: border-box;
			.inner-card-box {
				width: 100%;
				height: 100%;
				box-shadow: 0 0 3px 1px #2b5790;
				border: solid 1px #2b5790;
				border-radius: 10px;
				box-sizing: border-box;
				background: $card_bg;
				overflow: hidden;
				.card-title {
					background: url("card-title.png") no-repeat center;
					height: 32px;
					color: #54d3d8;
					font-size: 14px;
					display: flex;
					align-items: center;
					padding: 0 16px;
					justify-content: center;
					position: relative;
				}
				.delete-chart-icon {
					display: none;
					color: #ed4014;
				}
				.card-title:hover .delete-chart-icon {
					display: block;
					position: absolute;
					right: 14px;
					top: 8px;
				}
				.delete-chart-icon:hover {
					cursor: pointer;
				}
				.chart-more {
					color: #0C4C9E;
					font-size: 13px;
					position: absolute;
					right: 14px;
					top: 8px;
					cursor: pointer;
				}
				.chart-more:hover {
					color: #2d8cf0;
				}
				.card-chart {
					height: calc(100% - 34px);
				}
			}
		}
		.section-column-item-left {
			width: 30%;
			height: 100%;
		}
		.section-column-item-middle {
			width: 40%;
			height: 100%;
		}
		.section-column-item-right {
			width: 30%;
			height: 100%;
		}

		.section-column-item {
			width: 100%;
			height: calc(100% / 3);
			box-sizing: border-box;
		}
		.section-column-item-middle_top {
			width: 100%;
			height: 66.6666666%;
		}
		.card-box-padding:hover {
			border-color: #2d8cf0;
		}
		.section-column-item:hover .delete-icon {
			display: inline-block;
		}
	}
}
$color: #bfcbd9;
/*定义要拖拽元素的样式*/
.ghostClass {
	background-color: blue !important;
}

.chosenClass {
	background-color: blueviolet !important;
	opacity: 1 !important;
	color: $color!important;
}

.dragClass {
	background-color: #19be6b !important;
	opacity: 1 !important;
	color: $color!important;
	box-shadow: none !important;
	outline: none !important;
	background-image: none !important;
}

.itxst {
	margin: 10px;
}

.template-chart {
	width: 100%;
	overflow: hidden;
	cursor: move;
	color: #fff;
	border: solid 1px #2b5790;
	background: #122054;
	margin-bottom: 20px;
	padding: 12px;
	box-sizing: border-box;
	border-radius: 10px;
}
.template-chart:hover {
	border: solid 1px #2b5790;
	color: #fff;
}
